<!--
* @author wn
* @date 2022/09/20 15:05:38
* @description: 查看物流 组件  包含时间轴
* http://pcapi-xiaotuxian-front-devtest.itheima.net//member/order/consignmemt/!!!!!!!
!-->
<template>
	<xtx-dialog title="查看物流" v-model="dialogVisible">
		<!-- 只有  默认插槽 -->
		<template v-if="logistics">
			<div class="head">
				<a href="javascript:;">
					<img v-lazy="logistics?.picture" alt="" />
					<span>{{ logistics?.count }}1 件商品</span>
				</a>
				<section>
					<p><span>配送企业：</span>{{ logistics.company.name }}</p>
					<p><span>快递单号：</span>{{ logistics.company.number }}</p>
					<p><span>联系电话：</span>{{ logistics.company.tel }}</p>
				</section>
			</div>
			<!-- 物流信息 -->
			<div class="logistics">
				<div
					v-for="(item, index) in logistics.list"
					:key="item.id"
					class="item"
				>
					<div class="line" :class="{ active: index === 0 }"></div>
					<div class="info">
						<p>{{ item.text }}</p>
						<p>{{ item.time }}</p>
					</div>
				</div>
			</div>
		</template>
	</xtx-dialog>
</template>
<script>
import { logisticsOrder } from '@/network/order'
import { ref } from 'vue'

export default {
	name: 'OrderLogistics',
	setup() {
		const dialogVisible = ref(false)
		// 物流信息对象
		const logistics = ref(null)
		const open = async orderId => {
			dialogVisible.value = true
			try {
				const { result } = await logisticsOrder(orderId)
				logistics.value = result
			} catch (error) {}
		}

		return { dialogVisible, open, logistics }
	},
}
</script>
<style scoped lang="less">
.xtx-dialog :deep(.wrapper) {
	width: 680px;
}
.head {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: #f5f5f5;
	font-size: 14px;
	a {
		position: relative;
		width: 92px;
		height: 92px;
		border: 1px solid #e4e4e4;
		img {
			width: 100%;
		}
		span {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			color: #fff;
			line-height: 20px;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.5);
		}
	}
	section {
		margin-left: 20px;
		line-height: 30px;
		color: #ccc;
		span {
			color: #999;
		}
	}
}
// 时间轴
.logistics {
	padding: 30px 27px 10px;
	font-size: 14px;
	.item {
		display: flex;
		// 最后一个 没有左侧 线   没有边框 会偏移
		&:last-child {
			.line {
				border-left-color: transparent;
			}
		}
		.line {
			position: relative;
			height: 80px;
			border-left: 2px solid #f5f5f5;
			margin-right: 25px;
			&::before {
				position: absolute;
				left: -7px;
				top: 0;
				content: '';
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background: #e4e4e4;
			}
			&.active {
				&::before {
					background: @xtxColor;
					z-index: 1;
				}
				// 小圆点 外面 光晕   激活状态才有
				&::after {
					position: absolute;
					top: -4px;
					left: -11px;
					content: '';
					width: 20px;
					height: 20px;
					border-radius: 50%;
					background: #e3f9f4;
				}
			}
		}
		// 整体需要往上  提一提
		.info {
			position: relative;
			top: -4px;
			color: #666;
			:last-child {
				color: #999;
				margin-top: 6px;
			}
		}
	}
}
</style>
